<template>
  <div style="width: 1200px;margin:0 auto;border: 1px solid white;margin-top: 30px">
    <div class="lx">
      <div class="container">
        <p>品&nbsp;&nbsp;牌: </p>
        <ul>
          <li><a href="#" class="link">全部</a></li>
          <li><a href="#" class="link">万达影城</a></li>
          <li><a href="#" class="link">广影国际影城</a></li>
          <li><a href="#" class="link">中影环球影城</a></li>
          <li><a href="#" class="link">上影国际影城</a></li>
          <li><a href="#" class="link">恒大嘉凯影城</a></li>
          <li><a href="#" class="link">沃美影城</a></li>
          <li><a href="#" class="link">中影国际影城</a></li>
          <li><a href="#" class="link">春天国际影城</a></li>
          <li><a href="#" class="link">中影南方国际影城</a></li>
          <li><a href="#" class="link">保利国际影城</a></li>
          <li><a href="#" class="link">奥斯卡国际影城</a></li>
          <li><a href="#" class="link">时代电影大世界</a></li>
          <li><a href="#" class="link">幸福蓝海国际影城</a></li>
          <li><a href="#" class="link">大地影院</a></li>
          <li><a href="#" class="link">星星国际影城</a></li>
          <li><a href="#" class="link">横店影视</a></li>
          <li><a href="#" class="link">橙天嘉禾影城</a></li>
          <li><a href="#" class="link">汉鼎宇佑影城</a></li>
          <li><a href="#" class="link">中影星美国际影城</a></li>
          <li><a href="#" class="link">金逸影城</a></li>
          <li><a href="#" class="link">星轶starx影城</a></li>
          <li><a href="#" class="link">威尼斯国际影城</a></li>
          <li><a href="#" class="link">其他</a></li>
        </ul>
      </div>
    </div>

    <div class="lx">
      <div class="container">
        <p>行&nbsp;&nbsp;政&nbsp;&nbsp;区: </p>
        <ul>
          <li><a href="#" class="link">全部</a></li>
          <li><a href="#" class="link">地铁附近</a></li>
          <li><a href="#" class="link">青秀区</a></li>
          <li><a href="#" class="link">江南区</a></li>
          <li><a href="#" class="link">兴宁区</a></li>
          <li><a href="#" class="link">西乡塘区</a></li>
          <li><a href="#" class="link">良庆区</a></li>
          <li><a href="#" class="link">中国台湾</a></li>
          <li><a href="#" class="link">武鸣区</a></li>
          <li><a href="#" class="link">宾阳县</a></li>
          <li><a href="#" class="link">横州市</a></li>
          <li><a href="#" class="link">隆安县</a></li>
          <li><a href="#" class="link">邕宁区</a></li>
          <li><a href="#" class="link">马山县</a></li>
          <li><a href="#" class="link">上林县</a></li>
          <li><a href="#" class="link">其他</a></li>
        </ul>
      </div>
    </div>

    <div class="lx">
      <div class="container">
        <p>影&nbsp;&nbsp;厅&nbsp;&nbsp;类&nbsp;&nbsp;型</p>
        <ul>
          <li><a href="#" class="link">IMAX厅</a></li>
          <li><a href="#" class="link">CGS中国巨幕厅</a></li>
          <li><a href="#" class="link">杜比全景声厅</a></li>
          <li><a href="#" class="link">Dolby Cinema厅</a></li>
          <li><a href="#" class="link">RealD 6FL厅</a></li>
          <li><a href="#" class="link">LUXE巨幕厅</a></li>
          <li><a href="#" class="link">4DX厅</a></li>
          <li><a href="#" class="link">儿童厅</a></li>
          <li><a href="#" class="link">4K厅</a></li>
          <li><a href="#" class="link">4D厅</a></li>
          <li><a href="#" class="link">60帧厅</a></li>
          <li><a href="#" class="link">120帧/4K厅</a></li>
          <li><a href="#" class="link">巨幕厅</a></li>
          <li><a href="#" class="link">巨幕厅</a></li>
          <li><a href="#" class="link">CINITY厅</a></li>
          <li><a href="#" class="link">MX4D厅</a></li>
          <li><a href="#" class="link">激光厅</a></li>
        </ul>
      </div>
    </div>

    <div class="lx">
      <div class="container">
        <p>影&nbsp;&nbsp院&nbsp;&nbsp服&nbsp;&nbsp务:</p>
        <ul style="margin-bottom: 40px">
          <li><a href="#" class="link">全部</a></li>
          <li><a href="#" class="link">可改签</a></li>
          <li><a href="#" class="link">可退票</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div>
    <h2 class="cinemas-list-header">
      <span>影院列表</span>
    </h2>
  </div>
  <div class="cinema-cell">
    <el-row v-for="item in arr">
      <el-col :span="18">
        <a href="" class="cinema-name">{{item.name}}</a>
        <p class="cinema-address">{{item.address}}</p>
        <div class="cinema-tags">
          <span class="cinema-tags-item">改签</span>
          <span class="cinema-tags-item">折扣卡</span>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="price">{{item.price}}起</div>
      </el-col>
      <el-col :span="3">
        <el-button type="danger" round>
          <router-link to="/cinema">选座购票</router-link>
        </el-button>
      </el-col>
    </el-row>
  </div>

  <div class="cinema-cell">
    <el-row v-for="item in arr">
      <el-col :span="18">
        <a href="" class="cinema-name">{{item.name}}</a>
        <p class="cinema-address">{{item.address}}</p>
        <div class="cinema-tags">
          <span class="cinema-tags-item">改签</span>
          <span class="cinema-tags-item">折扣卡</span>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="price">{{item.price}}起</div>
      </el-col>
      <el-col :span="3">
        <el-button type="danger" round>
          <router-link to="/cinema">选座购票</router-link>
        </el-button>
      </el-col>
    </el-row>
  </div>

  <div class="cinema-cell">
    <el-row v-for="item in arr">
      <el-col :span="18">
        <a href="" class="cinema-name">{{item.name}}</a>
        <p class="cinema-address">{{item.address}}</p>
        <div class="cinema-tags">
          <span class="cinema-tags-item">改签</span>
          <span class="cinema-tags-item">折扣卡</span>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="price">{{item.price}}起</div>
      </el-col>
      <el-col :span="3">
        <el-button type="danger" round>
          <router-link to="/cinema">选座购票</router-link>
        </el-button>
      </el-col>
    </el-row>
  </div>

  <div class="cinema-cell">
    <el-row v-for="item in arr">
      <el-col :span="18">
        <a href="" class="cinema-name">{{item.name}}</a>
        <p class="cinema-address">{{item.address}}</p>
        <div class="cinema-tags">
          <span class="cinema-tags-item">改签</span>
          <span class="cinema-tags-item">折扣卡</span>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="price">{{item.price}}起</div>
      </el-col>
      <el-col :span="3">
        <el-button type="danger" round>
          <router-link to="/cinema">选座购票</router-link>
        </el-button>
      </el-col>
    </el-row>
  </div>

  <div class="cinema-cell">
    <el-row v-for="item in arr">
      <el-col :span="18">
        <a href="" class="cinema-name">{{item.name}}</a>
        <p class="cinema-address">{{item.address}}</p>
        <div class="cinema-tags">
          <span class="cinema-tags-item">改签</span>
          <span class="cinema-tags-item">折扣卡</span>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="price">{{item.price}}起</div>
      </el-col>
      <el-col :span="3">
        <el-button type="danger" round>
          <router-link to="/cinema">选座购票</router-link>
        </el-button>
      </el-col>
    </el-row>
  </div>

  <div class="cinema-cell">
    <el-row v-for="item in arr">
      <el-col :span="18">
        <a href="" class="cinema-name">{{item.name}}</a>
        <p class="cinema-address">{{item.address}}</p>
        <div class="cinema-tags">
          <span class="cinema-tags-item">改签</span>
          <span class="cinema-tags-item">折扣卡</span>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="price">{{item.price}}起</div>
      </el-col>
      <el-col :span="3">
        <el-button type="danger" round>
          <router-link to="/cinema">选座购票</router-link>
        </el-button>
      </el-col>
    </el-row>
  </div>

  <div class="cinema-cell">
    <el-row v-for="item in arr">
      <el-col :span="18">
        <a href="" class="cinema-name">{{item.name}}</a>
        <p class="cinema-address">{{item.address}}</p>
        <div class="cinema-tags">
          <span class="cinema-tags-item">改签</span>
          <span class="cinema-tags-item">折扣卡</span>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="price">{{item.price}}起</div>
      </el-col>
      <el-col :span="3">
        <el-button type="danger" round>
          <router-link to="/cinema">选座购票</router-link>
        </el-button>
      </el-col>
    </el-row>
  </div>

  <div class="cinema-cell">
    <el-row v-for="item in arr">
      <el-col :span="18">
        <a href="" class="cinema-name">{{item.name}}</a>
        <p class="cinema-address">{{item.address}}</p>
        <div class="cinema-tags">
          <span class="cinema-tags-item">改签</span>
          <span class="cinema-tags-item">折扣卡</span>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="price">{{item.price}}起</div>
      </el-col>
      <el-col :span="3">
        <el-button type="danger" round>
          <router-link to="/cinema">选座购票</router-link>
          </el-button>
      </el-col>
    </el-row>
  </div>

</template>

<script setup>
import {ref} from "vue";

const arr=ref([{"name":"SFC上影国际影城（星悦荟店）","address":"地址：青秀区高坡岭路3号星悦荟第4F层01号商铺","price":"￥24"}])
</script>

<style scoped>
.container{
  display: flex;
  align-items: center;
  padding: 0;
}
.container p{
  margin-right: 20px;
  padding-left: 20px;
  margin-bottom: 65px;
}

.lx ul {
  list-style: none; /* 去除默认的列表样式 */
  margin: 0;
  padding: 0;
}

.lx li {
  display: inline-block; /* 设置为行内块元素，使其水平排列 */
  padding: 5px 10px; /* 设置li元素的内边距 */
  background-color: #eee; /* 设置背景色 */
  border-radius: 10px; /* 设置圆角 */
  margin: 4px 10px;
  transition: all 0.3s;
}

.link {
  color: #000;
  text-decoration: none;
  transition: color 0.3s;
}

.lx li:hover,
.lx li:focus {
  background-color: #f00;
}

.lx li:hover a,
.lx li:focus a {
  color: #fff;
}
.cinemas-list-header{
  font-size: 18px;
  color: black;
  border-left: 4px solid red;
  padding-left: 18px;
  line-height: 18px;
  margin: 0;
  position: relative;
  width: 1200px;
  margin: 0 auto;
}
.cinema-cell{
  display: block;
  padding: 20px 0;
  border-bottom: 1px dashed white;
  width: 1200px;
  margin: 0 auto;
}

.cinema-name{
  display: inline-block;
  font-size: 16px;
  line-height: 18px;
  color: black;
  margin-bottom: 10px;
}
.cinema-name:hover {
  color: red;
}
.cinema-address{
  font-size: 14px;
  line-height: 14px;
  color: #999;
  margin: 5px 0;
}

.cinema-tags{
  margin-top: 10px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #0aa1ed;
  line-height: 18px;
}
.cinema-tags span.cinema-tags-item{
  display: inline-block;
  border: 2px solid #509fc9;
  border-radius: 3px;
  padding: 0 2px;
  margin-right: 8px;
}

.price{
  font-size: 15px;
  color: red;
  height: 45px;
  line-height: 45px;
  margin: 0 0 20px 80px;
}
</style>